<template>
  <div class="approval-history-timeline">
    <v-timeline v-if="!loading && histories.length > 0" align="start" density="compact">
      <v-timeline-item
        v-for="(history, index) in histories"
        :key="history.id"
        :dot-color="getActionColor(history.action)"
        size="small"
      >
        <template v-slot:icon>
          <v-icon size="small">{{ getActionIcon(history.action) }}</v-icon>
        </template>

        <v-card class="elevation-2">
          <v-card-title class="py-2 px-3">
            <div class="d-flex align-center justify-space-between">
              <span class="text-body-2 font-weight-bold">
                {{ getActionText(history.action) }}
              </span>
              <v-chip
                :color="getActionColor(history.action)"
                size="x-small"
                variant="tonal"
              >
                {{ formatDate(history.processTime) }}
              </v-chip>
            </div>
          </v-card-title>

          <v-card-text class="py-2 px-3">
            <div class="d-flex align-center mb-2">
              <v-avatar size="24" class="mr-2" color="primary">
                <span class="text-white font-weight-bold text-caption">
                  {{ history.userName?.charAt(0) || 'U' }}
                </span>
              </v-avatar>
              <span class="text-body-2 font-weight-medium">
                {{ history.userName || '未知用户' }}
              </span>
            </div>

            <div v-if="history.comment" class="text-body-2 text-grey-darken-1">
              <v-icon size="small" class="mr-1">mdi-comment-text</v-icon>
              {{ history.comment }}
            </div>
          </v-card-text>
        </v-card>
      </v-timeline-item>
    </v-timeline>

    <!-- 加载状态 -->
    <div v-else-if="loading" class="text-center py-4">
      <v-progress-circular indeterminate color="primary" />
      <div class="mt-2 text-body-2 text-grey">加载审批历史中...</div>
    </div>

    <!-- 无数据状态 -->
    <div v-else class="text-center py-4">
      <v-icon size="48" color="grey-lighten-1">mdi-timeline-clock-outline</v-icon>
      <div class="mt-2 text-body-2 text-grey">暂无审批历史</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { format } from 'date-fns';
import { useMessage } from '@/composables/useMessage';
import {
  getHistoryByInstanceId,
  type ApprovalHistoryModel
} from '@/api/approval/history/ApprovalHistoryApi';

// Props
interface Props {
  instanceId: string;
}

const props = defineProps<Props>();

// 组合式函数
const { error: showError } = useMessage();

// 响应式数据
const loading = ref(false);
const histories = ref<ApprovalHistoryModel[]>([]);

// 获取操作图标
function getActionIcon(action: string | undefined): string {
  switch (action) {
    case 'APPROVE':
      return 'mdi-check-circle';
    case 'REJECT':
      return 'mdi-close-circle';
    case 'DELEGATE':
      return 'mdi-account-arrow-right';
    case 'TRANSFER':
      return 'mdi-transfer-right';
    case 'CLAIM':
      return 'mdi-hand-back-left';
    case 'RELEASE':
      return 'mdi-hand-back-right';
    default:
      return 'mdi-help-circle';
  }
}

// 获取操作颜色
function getActionColor(action: string | undefined): string {
  switch (action) {
    case 'APPROVE':
      return 'success';
    case 'REJECT':
      return 'error';
    case 'DELEGATE':
      return 'info';
    case 'TRANSFER':
      return 'warning';
    case 'CLAIM':
      return 'primary';
    case 'RELEASE':
      return 'grey';
    default:
      return 'grey';
  }
}

// 获取操作文本
function getActionText(action: string | undefined): string {
  switch (action) {
    case 'APPROVE':
      return '同意';
    case 'REJECT':
      return '拒绝';
    case 'DELEGATE':
      return '委托';
    case 'TRANSFER':
      return '转办';
    case 'CLAIM':
      return '认领';
    case 'RELEASE':
      return '释放';
    default:
      return '未知操作';
  }
}

// 格式化日期
function formatDate(date: string | Date | undefined): string {
  if (!date) return '';
  return format(new Date(date), 'MM-dd HH:mm');
}

// 加载审批历史
async function loadHistory() {
  if (!props.instanceId) return;

  loading.value = true;
  try {
    const response = await getHistoryByInstanceId(props.instanceId);
    histories.value = response.data.sort((a, b) => 
      new Date(b.processTime || 0).getTime() - new Date(a.processTime || 0).getTime()
    );
  } catch (error) {
    console.error('加载审批历史失败:', error);
    showError('加载审批历史失败');
  } finally {
    loading.value = false;
  }
}

// 监听instanceId变化
watch(() => props.instanceId, () => {
  loadHistory();
}, { immediate: true });

// 页面挂载时加载数据
onMounted(() => {
  loadHistory();
});
</script>

<style scoped>
.approval-history-timeline {
  min-height: 200px;
}

.v-timeline {
  padding-top: 0;
}

.v-card {
  margin-bottom: 8px;
}

.v-card-title,
.v-card-text {
  min-height: auto;
}
</style> 